<template>
  <div class="app">
    <h1>{{ name }}---{{ age }}</h1>
    <button @click="changeData">changeData</button>
    <hr />
    <h1>操作数组</h1>
    <h2>reactive</h2>
    <button @click="addArr">addArr</button>
    <p
      v-for="item in arr"
      :key="item"
    >
      {{ item }}
    </p>

    <h2>ref</h2>
    <button @click="addArr2">addArr2</button>
    <p
      v-for="item in arr2"
      :key="item"
    >
      {{ item }}
    </p>
  </div>
</template>
<script>
// reactive 可以用于定义对象和数组
// ref 定义普通数据类型,也可以定义数组
// import { reactive, toRefs, toRef } from 'vue';
// import { reactive, toRef } from 'vue';
import { ref, reactive } from 'vue';
export default {
  setup() {
    let name = ref('code');
    let age = ref(18);
    console.log(name);

    const changeData = () => {
      name.value = 'fly';
      age.value = 16;
    };

    let arr = reactive([1, 2, 3, 4]);
    // push、unshift、pop、shift、concat、splice
    let addArr = () => {
      // arr.push(Date.now());
      // reactive 底层使用的是Proxy 的方式设置的没有concat 写法
      // arr.concat([5, 6]);
    };

    let arr2 = ref([1, 2, 3, 4]);
    let addArr2 = () => {
      // arr2.value.push(Date.now());
      // arr2.value = [1, 2];
      arr2.value = [...arr2.value, ...[5, 6]];
    };
    return {
      arr,
      addArr,
      arr2,
      addArr2,
      name,
      age,
      changeData,
    };
  },
};
</script>
<style lang="scss" scoped></style>
